import { Divider } from '@/library/gallery/components/Divider'
import { DemoBlock } from '@/library/widgets/DemoBlock'

const DividerDemo: React.FC = () => (
  <>
    <DemoBlock title="基础分割线">
      <Divider />
    </DemoBlock>

    <DemoBlock title="带内容的分割线">
      <Divider>默认内容在中间</Divider>
      <Divider contentPosition="left">左侧内容</Divider>
      <Divider contentPosition="right" style={{ '--content-color': 'var(--rta-color-success)' }}>右侧内容自定义文字颜色</Divider>
    </DemoBlock>

    <DemoBlock title="自定义样式1">
      <Divider
        style={{
          color: '#f00',
          borderColor: '#1677ff',
          borderStyle: 'dashed',

        }}
      >
        自定义样式
      </Divider>
    </DemoBlock>
    <DemoBlock title="自定义样式2">
      <Divider style={{ '--border-color': 'var(--rt-color-success)' }}>
        自定义样式
      </Divider>
    </DemoBlock>
    <DemoBlock title="竖向分割线">
      <>
        Text
        <Divider direction="vertical" />
        <a href="void:(0)">Link</a>
        <Divider direction="vertical" />
        <a href="void:(0)">Link</a>
      </>
    </DemoBlock>
    <DemoBlock title="竖向分割线自定义样式">
      <>
        Text
        <Divider
          direction="vertical"
          style={{
            borderColor: 'void:(0)1677ff',
          }}
        />
        <a href="void:(0)">Link</a>
        <Divider
          direction="vertical"
          style={{
            borderColor: 'var(--rta-color-success)',
          }}
        />
        <a href="void:(0)">Link</a>
      </>
    </DemoBlock>
  </>
)

export default DividerDemo
